<style lang="scss" scoped>
.main {
  box-sizing: border-box;
  background-color: #ebebeb;
  height: calc(100vh - $tabbar-height);
  overflow: auto;
}

.user-order-bg {
  color: white;
  box-sizing: border-box;
  background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
  padding: 10px 10px;
}

.user-info {
  box-sizing: border-box;
  padding: 10px;
  margin: 10px 10px;
}

.my-swipe {
  color: black;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
}

.van-swipe-item {
  color: black;
  height: 140px;
  overflow: auto;
  display: flex;
  flex-flow: column;
  justify-content: stretch;
}

.user-name {
  margin-bottom: 10px;
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  height: 70px;
  overflow: hidden;
}

.nav-card {
  color: #2c3e50;
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  overflow: hidden;
}
</style>
<template>
  <div class="main">
    <!--如果场景为0,那就是展示用户信息和订单页面-->
    <template v-if="scene === 0">
      <!-- 订单页轮播展示待付款已付款订单-->
      <div class="user-order-bg">
        <div v-for="card in swiper_setting" :key="card.status">
          <!--判断每个数组的长度是否为0,为0就不展示订单卡片-->
          <div
            v-if="map_goods_info(user_data_handler(card.status)).length !== 0"
            class="title"
          >
            <h1>{{ card.title }}</h1>
          </div>
          <div
            v-if="map_goods_info(user_data_handler(card.status)).length !== 0"
            class="display-card"
          >
            <van-swipe
              :autoplay="card.switch_gutter"
              class="my-swipe"
              indicator-color="white"
            >
              <van-swipe-item
                v-for="item in map_goods_info(user_data_handler(card.status))"
                class="van-swipe-item"
                @click="order_swiper_click(item, card)"
              >
                <van-card
                  v-for="good in item.goods_info"
                  :num="good.num"
                  :thumb="good.s_goods_photos[0].path"
                  :title="good.goods_name"
                  style="background-color: #fff"
                >
                  <template #price>
                    {{ format_money(good.price) }}
                  </template>
                </van-card>
              </van-swipe-item>
            </van-swipe>
          </div>
        </div>
      </div>

      <div class="display-card user-info">
        <!-- 点击用户名字头像跳转到用户信息修改页面-->
        <div class="user-name display-card" @click="scene = 1">
          <van-row gutter="10">
            <van-col span="4">
              <van-image
                height="50px"
                round
                src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
                width="50px"
              />
            </van-col>

            <van-col span="20">
              <div>
                <van-row>
                  <van-col span="14">
                    <h1>{{ user_store.user_info.name }}</h1>
                    余额: {{ format_money(user_store.user_info.money) }}
                  </van-col>
                  <van-col span="10">
                    <van-button
                      size="small"
                      type="danger"
                      @click.stop="add_money"
                      >加10000块钱
                    </van-button>
                  </van-col>
                </van-row>
              </div>
            </van-col>
          </van-row>
        </div>

        <div class="display-card nav-card">
          <div @click="$router.push('address')">地址管理</div>
          <van-divider />
          <div>全部订单</div>
        </div>
      </div>
    </template>

    <!--如果场景为1,则是修改用户信息页面-->
    <template v-else>
      <van-nav-bar
        left-arrow
        left-text="返回"
        title="更改用户信息"
        @click-left="scene = 0"
      />
      <van-cell-group inset>
        <van-cell-group inset>
          <van-field
            v-model="username"
            :rules="[{ required: true, message: '请填写用户名' }]"
            label="用户名"
            name="用户名"
            placeholder="用户名"
          />

          <van-field
            v-model="password"
            :rules="[{ required: true, message: '请填写密码' }]"
            label="密码"
            name="密码"
            placeholder="密码"
            type="password"
          />
          <van-field label="头像" name="uploader">
            <template #input>
              <van-uploader v-model="user_avatar" max-count="1" reupload />
            </template>
          </van-field>
        </van-cell-group>
        <div style="margin: 16px">
          <van-button block native-type="submit" round type="primary">
            提交
          </van-button>
        </div>
      </van-cell-group>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { use_user_store } from "@/stores/user-store";
import { use_order_store } from "@/stores/order-store";
import {
  api_get_user_order,
  api_recharge,
  api_upload_file,
} from "@/service/api/user";
import { computed, onMounted, reactive, ref } from "vue";
import { format_money } from "@/utils/format-money";
import { useRouter } from "vue-router";

const $router = useRouter();

const order_store = use_order_store();
const user_store = use_user_store();
let user_order_data = ref([]);

// 控制场景,如果场景为0,那就是展示用户信息和订单页面,如果场景为1,则是修改用户信息页面
let scene = ref(0);
// 对各个订单的状态进行筛选
/*返回的单个订单中的status代表订单的状态，具体含义如下
-1：已删除，0：已过期，1:已下单，2:已支付，3:已发货, 4:退货中，5:退款中，6:已完成，7：已取消
*/
let user_data_handler = computed(() => {
  // 使用时传入对应的状态码即可
  return (status) => {
    return user_order_data.value.filter((item) => {
      return item.status == status;
    });
  };
});
//生成两个轮播图,配置
const swiper_setting = [
  {
    title: "待付款订单",
    status: "1",
    switch_gutter: 10000,
    order_scene: 1,
  },
  {
    title: "已支付订单",
    status: "2",
    switch_gutter: 9000,
    order_scene: 2,
  },
];
const map_goods_info = (classified_data) => {
  return classified_data.map((item) => {
    return {
      id: item.id,
      addr_id: item.addr_id,
      goods_info: JSON.parse(item.goods_info),
      status: item.status,
      total_price: item.total_price,
    };
  });
};
// 点击按钮增加钱数
const add_money = async () => {
  await api_recharge({ money: 10000 });
  await user_store.get_user_info();
};
// 获取用户的订单列表
const get_user_order = async () => {
  let res = await api_get_user_order();
  user_order_data.value = res.result.rows;
  console.log(res);
};
// 点击轮播卡片后,跳转至订单页面,将订单数据放入仓库中
const order_swiper_click = async (item, card) => {
  order_store.$patch({
    user_order: item,
    page_scene: card.order_scene,
  });
  await order_store.format_user_address();
  $router.push("order");
};

// 更新用户信息表单对象
const user_avatar = ref();
const update_userinfo_form = ref();

onMounted(() => {
  get_user_order();
  user_store.get_user_info();
});
</script>
